<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>React的props和state</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
     <div id = "example"></div>
	<script type="text/babel">
   
  class Person extends React.Component{
      
      constructor(){
         super();
         this.state = {
             name: '人',
              age: '26',
              url: 'www.baidu.com'
         }
      }

      render(){
         
         return(
               <div>
                 <Name name = {this.state.name}/>
               <h2>年龄是：{this.state.age} </h2>
               <Link url = {this.state.url} />
 
               </div>
         );
      }
   } 


  class Name extends React.Component{

    render(){
       return(
         <div>
          <h1>姓名是：{this.props.name}</h1>
         </div>
       );
     }
  } 

  class Link extends React.Component{

    render(){
       return(
         <div>
         <a href={this.props.url}>链接是{this.props.url}</a>
         </div>
       );
     }
  } 
   

   ReactDOM.render(
      <Person />,
      document.getElementById('example')
  );


	</script>
</body>
</html>